<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../vue.js"></script>
 </head>
<body>
    <div id="app">
        <!-- 
        插值语法注意事项: 
          1. 插值语法中的变量都是从当前的vm对象上去寻找的
          2. 插值语法中可以书写任意表达式(由一个或者多个变量或值 配合0个或多个运算符组成的 被称作为表达式,表达式都会有返回值),不能书写语句
          3. 插值的变量可以是任意类型的,按照一定的规则转为字符串展示(Symbol除外)

       -->
        <h1>{{name}}的基础使用</h1>
        <h1>{{1+1}}</h1>
        <h1>{{5&&0}}</h1>
        <h1>{{isHot?"今天真热":"今天太冷"}}</h1>
        <h1>{{hobby[0]}}</h1>
        <h1>{{score}}</h1>
        <h1>null--{{null}}</h1>
        <h1>undefined--{{undefined}}</h1>
        <!-- 暂时不能识别Symbol -->
        <!-- <h1>symbol--{{Symbol('sy1')}}</h1> -->
        <h1>bigInt--{{1n}}</h1>
        <h1>arr--{{hobby}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data() {
                return {
                    project: "Vue",
                    isHot: true,
                    hobby: ["唱", "跳", "rap"],
                    score: {
                    ch: 100,
                     math: 80,
                    }
                }
            }
        })
       
    </script>
</body>
</html>